<template>
	<div class="page-wrapper">
		<div style="height:8%; padding-bottom:var(--mPadding);">
			<div class="flex-btn large" @click="info = { visible:true, forEdit:false } ">
				<img :src="Icon" />
				<span>新增对象分组</span>
			</div>
		</div>
		<div style="height:92%">
			<TableWrapper :style="{ height:'100%' }" :controls="controls" :pageInfo="pageInfo" :sourceData="tableData" :column="column" :total="total" @search="handleSearch" />
		</div>
		<!-- 新建巡检对象模板 弹窗 -->
		<GroupAddModal v-model:info="info" :userList="userList" @refresh="fetchGroupList" />
	</div> 
</template>

<script setup>
	import { reactive, onMounted, ref, h } from 'vue';
	import { useRouter } from 'vue-router';
	import { useGlobalStore } from '@/stores/global';
	import { getGroupList, delGroup, getUserList } from '@/api/group.js';
	import { Search, View, RefreshRight, InfoFilled, Delete, EditPen, Plus, Printer } from '@element-plus/icons-vue'
	import { ElMessage, ElPopconfirm, ElInput  } from 'element-plus'
	import TableWrapper from '@/components/TableWrapper/index.vue';
	import GroupAddModal from './GroupAddModal.vue';
	import ConfirmDel from '@/components/ConfirmDel.vue';
	import Icon from '@/assets/icon-add.png';

	const pageInfo = reactive({ page:1, pageSize:10 });
	const router = useRouter();
	const userMaps = ref({});
	const tableData = ref([]);
	const total = ref(0);
	const userList = ref(0);
	const controls = [
		{ type:'input', paramKey:'groupName', placeholder:'输入名称查询' },
	];
	
	const info = ref({ visible:false, forEdit:false });
	
    const column = [
		{ label:'序号', hasIndex:true },
        { label:'分组名称', width:'40%', prop:'groupName' }, 
        { label:'负责人', width:'40%', hasTpl:true, render:row=>({ com:h('div', null, userMaps.value[row.userId] || '--' ) })},
        { label:'操作', width:'12%', hasTpl:true, render:(row)=>{
            return {
				com:h('div', { class:'action-container' }, [
            	    h('div', { onClick:()=>{  info.value = { visible:true, forEdit:true, row }  }}, [h('i', { class:'ri-edit-line' }), h('span', null, '编辑')]),
					h(ConfirmDel, { info:'确定要删除此分组吗？', onConfirm:()=>{  handleDelete(row.groupId) } } ),
            	])
			}; 
        }
        }
    ]; 	
	const handleSearch = (optional)=>{
		// 调用请求接口
		fetchGroupList({ ...optional });
	}
	const handleDelete = (id)=>{
		delGroup({ groupId:id })
		.then(res=>{
			if ( res.data.code === 200 ) {
				ElMessage({
					type:'success',
					message:'删除模板成功！' 
				});
				fetchGroupList();
			}
		})
	}
	const fetchGroupList = (params)=>{
		// 实际的axios请求;
		params = params || { };
		let realParams = { page:pageInfo.page, pageSize:pageInfo.pageSize };
		Object.keys(params).forEach(key=>{
			if ( params[key] ) {
				realParams[key] = params[key];
			}
		})
		getGroupList(realParams)
		.then(res=>{
			if ( res.data.code === 200 ){
				tableData.value = res.data.data;
				total.value = res.data.total;
			}
		})
	}
	const fetchUserList = (params)=>{
		getUserList({})
		.then(res=>{
			if ( res.data.code === 200 ){
				if ( res.data.data ){
					let arr = []
					Object.keys(res.data.data).forEach(key=>{
						arr.push({ userId:key, userName:res.data.data[key] })
					});
					userMaps.value = res.data.data;
					userList.value = arr;
				}
			}
		})
	}
	onMounted(()=>{
		fetchGroupList();
		fetchUserList();
	})
</script>
